js遮罩层弹出div效果一例

来源:网络整理作者:网友投稿发布时间:2020-12-27 13:20

js遮罩层弹出div效果的例子，锁定html页面，供大家学习参考。...

完整代码如下：

<htmlxmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>js遮罩层效果_</title> <script> function createIframe(){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="mDiv"; newMask.style.position="absolute"; newMask.style.zIndex="1"; _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); // _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight); newMask.style.width=_scrollWidth+"px"; newMask.style.height=_scrollHeight+"px"; newMask.style.top="0px"; newMask.style.left="0px"; newMask.style.background="#33393C"; //newMask.style.background = "#FFFFFF"; newMask.style.filter="alpha(opacity=40)"; newMask.style.opacity="0.40"; newMask.style.display='none'; var objDiv=document.createElement("DIV"); objDiv.id="div1"; objDiv.name="div1"; objDiv.style.width="480px"; objDiv.style.height="200px"; objDiv.style.left=(_scrollWidth-480)/2+"px"; objDiv.style.top=(_scrollHeight-200)/2+"px"; objDiv.style.position="absolute"; objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上 objDiv.style.display="none"; //让objDiv预先隐藏 objDiv.innerHTML=' <div id="drag" style="position:absolute;height:20px;width:100%;z-index:10001;top:0; background-color:#0033FF;cursor:move ;" align="right"> <input type=button value="X" onclick="HideIframe(document.getElementById(\'mDiv\'),document.getElementById(\'div1\'));"/> </div>'; //更改了X按钮为触发关闭事件。 objDiv.style.border="solid #0033FF 3px;"; var frm=document.createElement("iframe"); frm.id="ifrm"; frm.name="ifrm"; frm.style.position="absolute"; frm.style.width="100%"; frm.style.height=180; frm.style.top=20; frm.style.display=''; frm.frameborder=0; objDiv.appendChild(frm); // newMask.appendChild(objDiv); //问题出在这里：把frame所在的div变成了 newMask的子元素，当newMask透明度更改时，当然会影响到frame document.body.appendChild(newMask); document.body.appendChild(objDiv); var objDrag=document.getElementById("drag"); var drag=false; var dragX=0; var dragY=0; objDrag.attachEvent("onmousedown",startDrag); function startDrag(){ if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){ objDrag.setCapture(); objDrag.style.background="#0000CC"; drag=true; dragX=event.clientX; dragY=event.clientY; } }; objDrag.attachEvent("onmousemove",Drag); function Drag(){ if(drag){ var oldwin=objDrag.parentNode; oldwin.style.left=oldwin.offsetLeft+event.clientX-dragX; oldwin.style.top=oldwin.offsetTop+event.clientY-dragY; oldwin.style.left=event.clientX-100; oldwin.style.top=event.clientY-10; dragX=event.clientX; dragY=event.clientY; } }; objDrag.attachEvent("onmouseup",stopDrag); function stopDrag(){ objDrag.style.background="#0033FF"; objDrag.releaseCapture(); drag=false; }; } function htmlEditor(){ var frm=document.getElementById("ifrm"); var objDiv=document.getElementById("div1"); var mDiv=document.getElementById("mDiv"); mDiv.style.display=''; var iframeTextContent=''; iframeTextContent+=' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'; iframeTextContent+=' <html xmlns="">'; iframeTextContent+=' <head>'; iframeTextContent+=' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />'; iframeTextContent+=' </head>'; iframeTextContent+=' <body>'; iframeTextContent+=' <table>'; iframeTextContent+=' <tr>'; iframeTextContent+=' <td>Name </td>'; iframeTextContent+=' <td> <input type="text" value="" /> </td>'; iframeTextContent+=' </tr>'; iframeTextContent+=' <tr>'; iframeTextContent+=' <td>Email </td>'; iframeTextContent+=' <td> <input type="text" value="" /> </td>'; iframeTextContent+=' </tr>'; iframeTextContent+=' <tr>'; iframeTextContent+=' <td> <input type="button" id="btGo" value="Go" /> </td>'; iframeTextContent+=' </tr>'; iframeTextContent+=' </table>'; iframeTextContent+=' </body>'; iframeTextContent+=' </html>'; frm.contentWindow.document.designMode='off'; frm.contentWindow.document.open(); frm.contentWindow.document.write(iframeTextContent); frm.contentWindow.document.close(); objDiv.style.display = ""; //显示浮动的div var objGo=frm.contentWindow.document.getElementById("btGo"); objGo.attachEvent("onclick",function (){ HideIframe(mDiv,objDiv); }); } function HideIframe(mDiv,objDiv){ mDiv.style.display='none'; objDiv.style.display = "none"; //隐藏浮动的div } </script> </head> <body onLoad="createIframe()"> <table> <tr> <td>aa</td> <td><input type="text"/></td> </tr> <tr> <td>bb</td> <td><input type="text"/></td> </tr> </table> <input type="button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/> </body> </html>